<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="checkbox" id="all"><label for="all">全选</label><br>
        <input type="checkbox" name="hobby" value="游泳" id="ck1"><label for="ck1">游泳</label><br>
        <input type="checkbox" name="hobby" value="唱歌" id="ck2"><label for="ck2">唱歌</label><br>
        <input type="checkbox" name="hobby" value="跳舞" id="ck3"><label for="ck3">跳舞</label><br>
        <input type="checkbox" name="hobby" value="玩游戏" id="ck4"><label for="ck4">玩游戏</label><br>
        <input type="checkbox" name="hobby" value="RAP" id="ck5"><label for="ck5">RAP</label><br>
        <input type="checkbox" name="hobby" value="篮球" id="ck6"><label for="ck6">篮球</label><br>
        <input type="checkbox" name="hobby" value="编程" id="ck7"><label for="ck7">编程</label><br>
    </div>
    <script>
        var inputs=Array.from(document.getElementsByTagName("input"));
        inputs.forEach(function(item){
            item.onclick=clickHandler;

        })
        function clickHandler(){
            if(this.id==="all"){
                inputs.slice(1).forEach(function(item){
                    item.checked=inputs[0].checked;
                })

                
            }else{
                inputs[0].checked=inputs.slice(1).every(function(item){
                    return item.checked;
                })
            }
        }
// 1-用标签名连接js和html
// 2-定义每个input元素点击时设定函数
// 3-定义时和其他元素状态相同
// 4-定义当全选状态时，有一个为false，就为false

    















    </script>
</body>
</html>